import React from 'react';
import styles from './index.less';
import { Avatar, Dropdown, Menu, Spin } from 'antd';
import { connect } from 'dva';
import { history } from 'umi';

import { TRAlert } from '@/components';
import { LogoutOutlined, RightOutlined, EditOutlined, DownOutlined } from '@/utils/antdIcons';
import renovate from '@/utils/renovate';

const menuKey = {
  logout: 'logout',
  personal: 'personal',
  password: 'password',
};

const hoverMenu = [
  { key: menuKey.personal, path: 'personalCenter/message' },
  {
    key: menuKey.password,
    title: '修改密码',
    path: 'personalCenter/changePassword',
    icon: <EditOutlined />,
  },
  { key: menuKey.logout, title: '退出登录', path: '' },
];

class AvatarDropdown extends React.Component {
  onMenuClick = async (event) => {
    const { key } = event;

    if (key === menuKey.logout) {
      let obj = { index: 1 };
      if (renovate.isRenovate) {
        obj = await TRAlert.show('当前工作将不被保存，继续执行此操作？');
      }
      if (obj.index === 1) {
        this.props.dispatch({ type: 'login/logout' });
      }
      return;
    }

    const path = hoverMenu.filter((n) => n.key === key);
    history.push({
      pathname: '/personal',
      query: { path: path && path[0].path },
    });
  };

  render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
    } = this.props;
    const __overlay = (
      <Menu
        className={`${styles.menu} ${styles.hoverPersonBox}`}
        // mode="inline"
        selectedKeys={[]}
        onClick={this.onMenuClick}
      >
        {hoverMenu.map((item) => {
          return (
            <Menu.Item key={item.key} title={''}>
              {/*个人信息*/}
              {item.key === menuKey.personal ? (
                <div className={styles.personMessage}>
                  <div className={styles.left}>
                    <div className={styles.imgBox}>
                      <img src={currentUser.avatar} alt="" />
                    </div>
                    <span style={{ marginLeft: '13px' }}>{currentUser.name}</span>
                  </div>
                  <RightOutlined style={{ color: 'var(--font4)', marginRight: 0 }} />
                </div>
              ) : null}
              {/*中间部分*/}
              {item.key !== menuKey.logout && item.key !== menuKey.personal ? (
                <div className={styles.orderMenu}>
                  {item.icon}
                  {item.title}
                </div>
              ) : null}
              {/*退出登录*/}
              {item.key === menuKey.logout ? (
                <div className={styles.orderMenu}>
                  <LogoutOutlined type="logout" />
                  {item.title}
                </div>
              ) : null}
            </Menu.Item>
          );
        })}
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <Dropdown overlayClassName={styles.headerDropdown} overlay={__overlay}>
        <div className={styles.avatarBox}>
          <Avatar size={24} className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <div className={styles.avatarRight}>
            {/* <span>{currentUser.name}</span> */}
            <span>
              <DownOutlined />
            </span>
          </div>
        </div>
      </Dropdown>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
